<?php
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人信息页面</title>
    <link rel="stylesheet" href="qq.css" type="text/css">
</head>
<body>
<?php
$db = new PDO('mysql:dbname=qq;host=127.0.0.1','root','123456');
$statement = $db ->prepare("select * from userinfo where name=:name");
$statement->execute([':name' => $_SESSION['user']]);
$result = $statement->fetchAll();

?>
    <div class="info">
        <div class="edit">
            <label>
                <a href = "JavaScript:void(0)" class="a" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
                    编辑个人资料
                </a>
            </label>
            <div id="light" class="white_content">

                <a href = "javascript:void(0)" class="a" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">
                    ×
                </a>
                <div>
                    <table>
                        <thead>
                            <tr>
                                <th class="th">账号</th>
                                <th class="th">昵称</th>
                                <th class="th">性别</th>
                                <th class="th">年龄</th>
                            </tr>
                        </thead><br>
                        <tbody>
                        <?php     foreach($result as $value) {  ?>
                                       <tr class="td">
                                           <td><?php echo $value['ID'] ?></td>
                                           <td><?php echo $value['name'] ?></td>
                                           <td><?php echo $value['sex'] ?></td>
                                           <td><input value="<?php echo $value['age'] ?>"</td>
                                       </tr>
                          <?php     }  ?>
                        </tbody>
                        </table>
                </div>
                <div id="img">
                    <form method="post" action="file_submit.php" enctype="multipart/form-data" id="myform">
                        <input type="file" name="image" id="file">
                        <button id="button" type="submit" formtarget="iframe">上传图片</button>
                    </form>
                    <!--<iframe src="file_submit.php" name="iframe" width="220px" height="220px" scrolling="NO" frameborder="0"></iframe>-->
                    <div>
                        <?php     foreach($result as $value) {  ?>
                            <img src="<?php echo $value['img'] ?>">
                        <?php     }  ?>
                    </div>
                </div>

             </div>
         </div>
        <div id="fade" class="black_overlay"></div>
        <div>
            <table>
                <thead>
                <tr>
                    <th class="th">账号</th>
                    <th class="th">昵称</th>
                    <th class="th">性别</th>
                    <th class="th">年龄</th>
                </tr>
                </thead><br>
                <tbody>
<?php     foreach($result as $value) {  ?>
           <tr class="td">
               <td><?php echo $value['ID'] ?></td>
               <td><?php echo $value['name'] ?></td>
               <td><?php echo $value['sex'] ?></td>
               <td><?php echo $value['age'] ?></td>
            </tr>
<?php     }  ?>
                </tbody>
            </table>
        </div>
        <div>
<?php     foreach($result as $value) {  ?>
               <img src="<?php echo $value['img'] ?>">
<?php     }  ?>
        </div>
        <div class="back">
            <a href="main.php">返回聊天室</a>
        </div>
    </div>
<script type="text/javascript">
    var messageelement = document.getElementById('message');
    var buttonelement = document.getElementById('button');
    var formelement = document.getElementById('myform');
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                var result = JSON.parse(this.responseText);
                if (result.error == 1) {
                    messageelement.innerHTML = result.message;
                } else {
                    messageelement.innerHTML = "图片上传成功！";
                }
            }else{
                alert('出现错误，请联系管理员');
            }
        }
    };
    xhr.open(formelement.method,formelement.action);
    var data = new FormData();
    data.append('img',buttonelement.value);
    xhr.send(data);


</script>
</body>
</html>
